<template>
  <div class="editInfo">
    <div class="header-title">
      <img
        src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/smile.png"
        alt=""
        class="fufill_icon"
      />
      <span>完善信息注册成为脂谱身心健康会员！</span>
    </div>
    <!--     <div>
        <p class="tips">完善信息领取赠品及积分</p>
    </div> -->
    <div class="form">
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/personal.png" />
        </div>
        <input
          type="text"
          name=""
          class="input-control"
          placeholder="请输入姓名"
          v-model="fromData.name"
        />
      </div>
      <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/phone.png" />
        </div>
        <input
          type="text"
          name=""
          class="input-control"
          placeholder="请输入手机号码"
          v-model="fromData.phone"
        />
      </div>
      <div class="form-item">
        <div class="iconBox">
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/activities.png"
          />
        </div>
        <div class="radio-control">
          <span class="radioBox" :class="{ active: fromData.sex == '0' }">
            <input
              type="radio"
              v-model="fromData.sex"
              name="sex"
              value="0"
            /> </span
          >男
          <span class="radioBox" :class="{ active: fromData.sex == '1' }">
            <input
              type="radio"
              v-model="fromData.sex"
              name="sex"
              value="1"
            /> </span
          >女
        </div>
      </div>
      <!-- <div class="form-item">
        <div class="iconBox">
          <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/verify.png" />
        </div>
        <input
          type="text"
          name=""
          class="input-control verify"
          placeholder="请输入验证码"
          v-model="fromData.verificationCode"
        />
        <span
          class="verifyBtn"
          @click="sendVerifyCode()"
          v-show="!isSendingCode"
          >获取验证码</span
        >
        <span class="verifyBtn disabled" v-show="isSendingCode"
          >重新发送{{ second }}s</span
        >
      </div> -->
    </div>
    <div class="vip-info">
      <!--       <div class="radio-control">
        <span class="radioBox" :class="{'active':isVip}">
                <input type="checkbox" v-model="isVip">
            </span>
      </div> -->
      <div class="info">
        <!-- <p>注册完成获赠富纤益生菌1盒/298元，将随货发送</p> -->
        <p>(我们将为您的信息严格保密，不会对其他人员和机构公开)</p>
      </div>
    </div>
    <!-- <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/score.png" class="handle" @click="submit()"> -->
    <span class="submit" @click="submit()">下一步</span>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { mapActions } from "vuex";
import { deepCopyObj, checkZhName, checkPhone, checkCode } from "common/utils";
import { wxshare } from "common/mixin";
export default {
  mixins: [wxshare],
  data() {
    return {
      fromData: {
        name: "",
        phone: "",
        sex: 1,
        // verificationCode: "",
        // securityCode:''
      },
      isVip: false,
      options: [
        {
          label: "我是上海CA俱乐部会员",
          value: "1",
        },
      ],
      isSendingCode: false,
      second: 60,
    };
  },
  methods: {
    ...mapActions({
      Register: "Register",
      GetVerifyCode: "GetVerifyCode",
      GetInfo: "GetInfo",
    }),
    submit: function () {
      console.log("fromData", this.fromData);
      for (let key in this.fromData) {
        if (!this.fromData[key]) {
          Toast("请先完善信息再提交！");
          return false;
        }
      }
      if (!checkZhName(this.fromData["name"])) {
        Toast("姓名只能是2-4位的中文字符！");
        return false;
      }
      if (!checkPhone(this.fromData["phone"])) {
        Toast("请先填写正确的手机号！");
        return false;
      }
      // if (!checkCode(this.fromData["verificationCode"])) {
      //   Toast("验证码必须是6位数字！");
      //   return false;
      // }
      let data = deepCopyObj(this.fromData);
      console.log("data", data);
      // data['caMember'] = this.isVip.length > 0 ? true : false;
      // data['caMember'] = false;
      console.log("data", data);
      this.Register({ data: data }).then((result) => {
        this.GetInfo();
        if (this.$route.query.num) {
          console.log("test----");
          let num = this.$route.query.num;
          let price = this.$route.query.price;
          let pid = this.$route.query.pid;
          // this.$router.push({ path: 'order/orderConfirm', query: { num: num, price: price, pid: pid } });
          location.href = `order/orderConfirm?num=${num}&price=${price}&pid=${pid}`;
        } else {
          // this.$router.push({ path: 'personalCenter' });
          this.$router.push({ path: "orderPre" });
        }
      });
    },
    sendVerifyCode: function () {
      if (!this.fromData["phone"]) {
        Toast("请先填写手机号！");
        return false;
      }
      if (!checkPhone(this.fromData["phone"])) {
        Toast("请先填写正确的手机号！");
        return false;
      }
      console.log("options", this.fromData["phone"]);
      this.isSendingCode = true;
      let interval = setInterval(() => {
        this.second -= 1;
        if (this.second == 0) {
          this.isSendingCode = false;
          this.second = 60;
          clearInterval(interval);
          // test
        }
      }, 1000);
      let options = {
        phone: this.fromData["phone"],
      };
      this.GetVerifyCode(options)
        .then((result) => {})
        .catch(() => {
          this.isSendingCode = false;
        });
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.mint-switch {
  display: inline-block;
  .mint-switch-core {
  }
}

@import "./editInfo.less";
</style>
